import React, { Component } from 'react';

interface StateInter {
  a: number;
  b: number;
}

interface PropInter {
  b: string;
  c?: number;
  d: {
    test: string;
    testFn: (a: string) => number;
  };
}

interface PropInter2 {
  b: string;
  show: boolean;
}
class Child extends Component<PropInter2> {
  render() {
    return <div>{this.props.b}</div>;
  }
}
// 传入的泛型的第一个参数是 props 的interface  第二个是 state 的interface
export default class APP extends Component<PropInter, StateInter> {
  state = {
    a: 1,
    b: 2,
  };
  render() {
    let a: string | number = 2;
    // 类型断言
    let b = (a as unknown as string).substring(0);
    return (
      <div>
        <div>App</div>
        {this.state.a}
        {this.props.d.testFn}
        <Child b="xx" show={true} />
      </div>
    );
  }
}
interface ListPropsInter {
  listData: {
    page: number;
    totalCount: number;
    list: string[];
  };
}
function List(listProps: ListPropsInter) {
  const {
    listData: { page, totalCount, list },
  } = listProps;
  return (
    <div>
      当前页码：{page}
      所有数据条数：{totalCount}
      当前数据：
      {list.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

function App() {
  const listData = { page: 1, totalCount: 100, list: ['string'] };
  return (
    <div>
      <List listData={listData} />
    </div>
  );
}
